<template>
<view>
<!-- 需要做一个layout适应手机状态栏的高度 -->
	<u-status-bar></u-status-bar>
	<view class="kb-head-nav"> 	
		<up-navbar leftText="返回" :navbarStyle="barstyle"
		 :fixed="true" bg-color="none" :titleStyle="{'color': color}"
		 @leftClick="onLeftClick" :leftIconColor="color"
		  :title="title" :safeAreaInsetTop="true">
			<template #left>
				<view class="u-nav-slot">
					<!-- <up-icon name="arrow-left" size="19"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line> -->
					<up-icon name="home" :color="color" size="20"></up-icon>
				</view>
			</template>
		</up-navbar>
	</view>
</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onActivated,
		watchEffect,
		provide,
		nextTick
	} from 'vue';
	import { onPageScroll } from '@dcloudio/uni-app';
 
	const props = defineProps({
		// 导航列表
		title: {
			type: String,
			default: '首页'
		}  
	});
 
	const active = ref(0);
	const scrollTop = ref(0);  
	const color = ref('#f8f8f8');
	
	const barstyle = ref({
		'backgroundColor': '#000',
		'opacity': '0.1'
	});
	const onLeftClick = ()=>{
		console.log('click left icon')
	}
	 // onPageScroll 方法来更新 scrollTop 的值  
	 onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
		 
		if(e.scrollTop > 164){
			barstyle.value = {
				'backgroundColor': '#fff', 			 
			}
			color.value = '#333';
		}else{
			color.value = '#f8f8f8';
			barstyle.value = {
				'backgroundColor': '#333',
				'opacity': '0.1',				 
			}
		}
	 });
	 
</script>

<style lang="scss" scoped>
	
	.u-nav-slot {
			@include flex;
			align-items: center;
			justify-content: space-between;
			border-width: 0.5px;
			border-radius: 100px;
			border-color: $u-border-color;
			border-style: solid;
			padding: 3px 7px;
			opacity: 0.8;
		}
	 
</style>